<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国定制游_中国自由行路线推荐-第六感私享小团</title>
    <link rel="icon" href="image/public/Logo.ico">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/pay.css">
    <link rel="stylesheet" href="css/bottom.css">
    <link rel="stylesheet" href="element/index.css">
    <script src="jquery/jquery-3.6.0.js"></script>
    <script src="js/iconfont.js"></script>
    <script src="vue/vue.min.js"></script>
    <script src="element/index.js"></script>
    <script src="axios/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <!-- 最大的盒子 -->
        <div class="head_max">
            <!-- 小的盒子 -->
            <div class="head_min">
                <!-- 头部logo -->
                <div class="head_logo"></div>
                <!-- 导航条 -->
                <div class="navigation_bars">
                    <div class="nav_top">
                        <ul class="ul1">
                            <li> <a href="#">登录</a> <span>|</span> </li>
                            <li> <a href="#">注册送</a><span style="color:#ff8000;font-style: oblique;">900</span>
                                <span>|</span>
                            </li>
                            <li class="ul2-li li">
                                <a href="#" class="a_text_all">Language</a>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-daosanjiao"></use>
                                </svg>
                                <span>|</span>
                            </li>
                            <li class="li ul3-li">
                                <a href="#">CNY</a>
                                <svg class="icon" aria-hidden="true" style="margin-top: 4px;">
                                    <use xlink:href="#icon-daosanjiao"></use>
                                </svg>
                                <span>|</span>
                            </li>
                            <li> <a href="#">常见问题</a> <span>|</span> </li>
                            <li class="ul4-li">
                                <img src="image/head/phone2.svg" width="13">
                                <a href="#">APP客户端</a>
                                <span>|</span>
                            </li>
                            <li>
                                <img src="image/head/phone.svg" width="15">
                                <a href="#" style="color:#ff8000; font-style: oblique;font-size: 14px;">400-9600-080</a>
                            </li>

                        </ul>
                        <!-- 二级菜单 -->
                        <ul class="ul2">
                            <li><a href="#">English</a></li>
                            <li><a href="#">繁體中文</a></li>
                            <li><a href="#">简体中文</a></li>
                            <li style="border: 0;"><a href="#">日本语</a></li>
                        </ul>
                        <ul class="ul3">
                            <li><a href="#">CNY</a></li>
                            <li><a href="#">USD</a></li>
                            <li><a href="#">HKD</a></li>
                            <li style="border: 0;"><a href="#">JPY</a></li>
                        </ul>
                        <div class="ul4">
                            <div class="download-1">APP预订，即时简单快捷</div>
                            <div class="img"></div>
                        </div>
                    </div>
                    <div class="nav_bottom">
                        <ul>
                            <li> <a href="#">首页</a></li>
                            <li class="li">
                                <a href="#">别墅公寓</a>
                                <svg class="icon" aria-hidden="true" style="margin-top: 6px; font-size: 12px;">
                                    <use xlink:href="#icon-daosanjiao"></use>
                                </svg>
                            </li>
                            <li> <a href="#">甄选酒店</a></li>
                            <div class="new"></div>
                            <li> <a href="#" style="color: #ff8000;">私享小团</a></li>
                            <li> <a href="#">限时优惠</a></li>
                            <li> <a href="#">晒单</a></li>
                            <li> <a href="#">旅游故事</a></li>
                            <li> <a href="#">度假攻略</a></li>
                            <li> <a href="#">VVIP</a></li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="body">
            <div class="body-sort auto">
                <p>
                    <a title="首页" href="#">首页</a>
                    <i>&gt;</i>
                    <a title="支付页面" href="#" target="_blank">支付页面</a>
                </p>    
                <h2 class="auto">支付</h2>
            </div>
            <div class="body-fl auto">
                <div class="body-l">    
                    <div class="ordernumber">
                        您的订单号:
                        <span class="number">SLN{{ order_number }}</span>
                    </div>
                    <div class="amount flex martop10">
                        <div class="amount1">
                            付款金额：
                            <span class="pri">￥:</span>
                            <span class="allprice1">{{ total }}</span>
                            元
                        </div>
                        <div class="amount2">
                            已支付金额：
                            <span class="pri">￥:</span>
                            <span class="allprice">0</span>
                            元
                        </div>
                        <div class="amount3">
                            待付金额：
                            <span class="pri">￥:</span>
                            <span class="allprice">{{ total }}</span>  
                            元   
                        </div>
                    </div>
                    <div class="tips martop10 colff9">
                        温馨提示：
                        <div class="colff9">1、由于金额太大，为不影响正常支付，请选择合适支付方式，若超出支付限额，请进行订单拆分</div>
                        <div class="colff9">2、常用支付方式限额说明：快钱单笔限5万，支付宝单笔限额1万起，各银行支付限额参考限额订单<a href="#"><span class="tipsa colff9">查看限额清单▶</span></a></div>
                    </div>
                    <div class="bankcard">
                        填写银行卡支付限额：
                        <input type="text" placeholder="最低为5000" class="bank_txt">
                        <span class="bcny">CNY</span>
                        <span class="going">确定并拆分订单</span>
                    </div>
                    <div class="amount_list">
                        
                    </div>
                    <div class="referral">
                        <p>推荐支付<span class="ridel">推荐</span></p>
                        <label>
                            <input type="radio" name="ridel">
                            <div class="referral_img">   
                                <img src="image/pay_img/payment_1.png" alt="">
                            </div>
                        </label>
                    </div>
                    <div class="transfer">
                        <p>转账汇款<span class="ridels">立减25元</span></p>
                        <label>
                            <input type="radio" name="ridel">
                            <div class="transfer_img">   
                                <img src="image/pay_img/payment_2.png" alt="">
                            </div>
                        </label>
                    </div>
                </div>
                <div class="body-r">
                    <div class="r-one">
                        <div class="one-title"><span class="one-txt">价格</span><br/>如有比我们更优的价格，差价双倍赔付</div>
                        <div class="one-title"><span class="one-txt">品质</span><br/>所有别墅均亲自考察，保障品质</div>
                        <div class="one-title"><span class="one-txt">服务</span><br/>评论有礼全程贴心咨询，一站式为您服务</div>
                        <div class="one-title"><span class="one-txt">注册有礼</span><br/>只需注册，即可获得900元抵用券</div>
                        <div class="one-title"><span class="one-txt">评论有礼</span><br/>轻松点评，即可获得88抵用券</div>
                    </div>
                    <div class="r-two">
                        <div class="two-title">
                            <p class="title1">第六感预订机票</p>
                            <p class="title2">省心实惠</p>
                            <p class="title3">即刻订机票，尊享最低价</p>
                        </div>
                        <div class="two-btn">在线咨询</div>
                    </div>
                </div>
            </div>
            <div class="gopay" @click="gopay" style="cursor: pointer;">
                结账
            </div>

        </div>
        
        <div class="bottom">
            <div class="bottom_box">
                <div class="bottom_details">
                    <a href="">
                        <div class="img_Logo"></div>
                    </a>
                    <div class="bottom_text">
                        第六感-别墅公寓、奢华酒店、私人定制。我们推崇与众不同的度假理念，提供包括度假别墅、短租公寓和奢华酒店在内的多元化住宿选择，另有私人包机，行程定制，豪华游轮等预订服务。
                        第六感致力于满足您的个性化需求，为您提供专业的一站式度假服务。
                    </div>
                    <ul class="ul_css bottom_ul">
                        <li class="bottom_li">
                            <div class="bottom_ico_vx"></div>
                            <p class="bottom_p_css bottom_text">微信订阅号</p>
                        </li>
                        <li class="bottom_li">
                            <div class="bottom_ico_blog"></div>
                            <p class="bottom_p_css bottom_text">官方微博</p>
                        </li>
                        <li class="bottom_li">
                            <div class="bottom_ico_tmallx"></div>
                            <p class="bottom_p_css bottom_text">官方天猫</p>
                        </li>
                    </ul>
                </div>
                <div class="bottom_service">

                    <div class="service_box">
                        <div class="service_ico_box">
                            <div class="service_phone_ico">
                            </div>
                            <div class="service_text_box">
                                <span class="bottom_text service_text">400-9600-080</span>
                                <p class="bottom_text">7x24 小时在线服务</p>
                            </div>
                            <div class="service_message_ico"></div>
                            <div class="service_text_box">
                                <span class="bottom_text service_text">服务支持</span>
                                <p class="bottom_text">Rookie团队</p>
                            </div>
                        </div>
                        <div class="service_ico_box">
                            <div class="service_text_box">
                                <span class="bottom_text service_text">市场合作</span>
                                <p class="bottom_text">marketing@Rookie.com</p>
                            </div>
                            <div class="service_text_box">
                                <span class="bottom_text service_text">房源合作</span>
                                <p class="bottom_text">partnership@Rookie.com</p>
                            </div>
                        </div>
                        <ul class="ul_css" style="float:left;margin-top: 13px;">
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">关于团队</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">常见问题</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">服务理念</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">网站地图</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">加入我们</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">同行注册</span>
                                </a>
                            </li>
                        </ul>
                        <div class="service_reserve_box">
                            <div class="reserve_img"></div>
                            <p class="bottom_text reserve_text">APP预订，即时简单快捷</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="business_license">
                <div class="bottom_box">
                    <div class="business_license_text">Copyright © 2013-2022 上海墅假网络科技有限公司 沪ICP备14011210号 营业执照</div>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/api.js"></script>
<script src="./js/pay.js"></script>
</body>
</html>
